import React from 'react';
import { LockOutlined, UserOutlined } from '@ant-design/icons';
import { Button, Form, Input, message } from 'antd';
import type { FormProps } from 'antd';
import Card from 'antd/es/card/Card';
import '../index.css'
import link from "../utils/link.tsx";

const register: React.FC = () => {

  {/* --注册校验-- */ }
  type FieldType = {
    account?: string;
    password?: string;
    new_password?: string;
    re_new_password?: string;
  };

  const [messageApi, contextHolder] = message.useMessage();

  const success = () => {
    messageApi.open({
      type: 'success',
      content: '密码修改成功，请返回登录',
    });
  };

  const error = () => {
    messageApi.open({
      type: 'error',
      content: '修改失败，请检查账号和原密码是否输入正确',
    });
  };

  const onFinish: FormProps<FieldType>['onFinish'] = (values) => {
    link("", "post", {}, { account: values.account, password: values.new_password }).then((ok: any) => {
      if (ok.data.code == 1) {
        success()
      }
      else
        error()
    })
  };

  {/* --return界面-- */ }
  return (
    <Card className='login_box'>
      {contextHolder}
      <Form
        name="login"
        initialValues={{ remember: true }}
        style={{ maxWidth: 360 }}
        onFinish={onFinish}
      >
        <Form.Item
          name="username"
          rules={[{ required: true, message: '账号不能为空' }]}
        >
          <Input prefix={<UserOutlined />} placeholder="请输入账号" />
        </Form.Item>
        <Form.Item
          name="password"
          rules={[{ required: true, message: '原密码不能为空' }]}
        >
          <Input prefix={<LockOutlined />} type="password" placeholder="请输入原密码" />
        </Form.Item>
        <Form.Item
          name="new_password"
          rules={[{ required: true, message: '新密码不能为空' }]}
        >
          <Input prefix={<LockOutlined />} type="password" placeholder="请输入新密码" />
        </Form.Item>
        <Form.Item
          name="re_new_password"
          rules={[{ required: true, message: '确认密码不能为空' }]}
        >
          <Input prefix={<LockOutlined />} type="password" placeholder="请输入确认密码" />
        </Form.Item>

        <Form.Item>
          <Button block type="primary" htmlType="submit">
            修改密码
          </Button>
        </Form.Item>
      </Form>
    </Card>

  );
};

export default register;